<section class="content-section-column">
  <lv-list style="width: 320px">
    <lv-list-item *ngFor="let item of taskData" [lvExtra]="extraRender">
      <lv-list-item-meta [lvDataSource]="item" [lvTitle]="item.title"></lv-list-item-meta>
    </lv-list-item>
  </lv-list>

  <lv-list style="width: 320px" lvHoverable>
    <lv-list-item *ngFor="let item of taskData" [lvExtra]="extraRender">
      <lv-list-item-meta [lvDataSource]="item" [lvTitle]="titleRender"></lv-list-item-meta>
    </lv-list-item>
  </lv-list>

  <lv-list>
    <lv-list-item *ngFor="let item of data">
      <lv-list-item-meta
        [lvDataSource]="item"
        [lvAvatar]="AvatarRender"
        [lvTitle]="item.title"
        [lvDescription]="item.description"
      ></lv-list-item-meta>
    </lv-list-item>
  </lv-list>
</section>

<ng-template #AvatarRender let-data>
  <span class="list-demo-avatar">
    <img [src]="data.image" alt="avatar" />
  </span>
</ng-template>

<ng-template #extraRender let-data>
  <span>{{ data.extra }}</span>
</ng-template>

<ng-template #titleRender let-data>
  <a href="" lv-link>{{ data.title }}</a>
</ng-template>
